<template>
    <div class="game-list-page" style="margin-top:25px;min-height:100%;">
      <ul class="games-data" :class="[model]">
        <li v-for="(item, idx) in data" :key="idx" class="gd-item" :class="{'no-data':!item.id}">
          <a :href="'/game/'+item.id" target="_blank" v-if="item.id">
          <div class="mimg-box">
            <img loading="lazy"  :srcsets="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
            <span class="pnum">{{ item.totalImageCount }}</span>
            <div class="cate-dsc">{{item.device}}{{item.categoryName?(item.device?' · ':'')+item.categoryName:''}}{{item.style?' · '+item.style:''}}{{item.era?' · '+item.era:''}}</div>
          </div>
          <div class="basic-info">
            <div class="title">{{ item.title }}</div>
            <div class="bot-desc">
              <span class="uname">
                <img loading="lazy" class="u-img" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 40, name: item.member.userName }"/>
                <a class="name-text">{{ item.member.userName }}</a>
                
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.member.tagsList">
                                                <i class="sm-tip" slot-content>{{tag.title}}</i>
                                                <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                                                </el-popover>
              </span>
              <div class="rt">
                <div class="znum">
                  {{ item.praiseStr }}
                </div>
                <div class="vnum">
                  {{ item.seeStr }}
                </div>
              </div>
            </div>
          </div>
          <div class="left-icos">
            <!-- <img loading="lazy" src="../../assets/pro/common/hot.png" alt="" v-if="item.hot" /> -->
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                <img loading="lazy" slot="reference" src="../../assets/pro/common/new.png" alt="">
            </el-popover>
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                <img loading="lazy" slot="reference" src="../../assets/pro/common/hot.png" alt="" >
            </el-popover>
            <el-popover popper-class="gm-info-pop"
                    placement="top-start"
                    trigger="hover" v-if='item.videoUrl'>
                    <i class="sm-tip" slot-content>内容含视频</i>
                    <img loading="lazy" slot="reference" src="../../assets/pro/common/video.png" alt="" >
                  </el-popover>
          </div>
          <div class="right-icos hid-el" v-if="item.tagsList && item.tagsList.length > 0">
            <!-- <img loading="lazy" src="../../assets/pro/common/rz2.png" alt=""> -->
            <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image" :src="t.image" alt="" />
          </div>
          <!-- <div class="con-mask hid-el"></div> -->
          </a>
        </li>
      </ul>
  
      <!-- <transition name="fade"> -->
      <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body  :visible.sync="showInfo" direction="btt">
        <gameInfo @close="onInfoClose" :id="currentId"/>
      </el-drawer>
      <!-- </transition> -->
    </div>
  </template>
  
  <script>
  import pswiper from '@/components/pswiper'
  import gameInfo from '@/components/gameInfo'
  import api from '@/api/api'
  export default {
    components:{gameInfo,pswiper},
    data() {
      return {
        isFocus:false,
        model:'big',
        currentId:'',
        showInfo: false,
        keyword: '',
        gTypes: [],
        list: [],
        queryParams: {
          pageNum: 1,
          pageSize: 35,
          orderByColumn:'createTime',
          rank:'首页推荐',
          categoryId:22,
          isAsc:'desc',
          categoryIds:'',
          device:''
        },
        total: 0,
        hasMore: true,
        scrollLoaded: false,
        allCates: [],
        curAllCateKey: '',
        curCates: [],
        curFullPath:''
      }
    },
    props:['data'],
    async mounted() {
        
    },
    methods: {
      loadError(e){
          e.target.removeAttribute('srcset');
      },
      onLoaded(e,item){
      let domainUrl=this.$imgdomainurl+'article-';
      let el=e.target;
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      let srcsets=[];
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@1x432.webp 1x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@2x432.webp 2x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@3x432.webp 3x');
      el.srcset=srcsets.join(',')
    },
    getimgObj(item){
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      return{
        src:this.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x432.webp',
        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
      }
    },
      chooseByCate(_item){
        this.queryParams.categoryIds=_item.value;
        this.queryParams.pageNum=1;
        this.list=[];
        this.scrollLoaded=false;
        this.hasMore=true;
        this.queryList();
      },
      chooseDevice(_device){
        this.queryParams.device=_device==this.queryParams.device?'':_device;;
        this.queryParams.pageNum=1;
        this.list=[];
        this.scrollLoaded=false;
        this.hasMore=true;
        this.queryList();
      },
      handleSearch(){
        this.queryParams.pageNum=1;
        this.list=[];
        this.scrollLoaded=false;
        this.hasMore=true;
        this.queryList();
      },
      chooseScreen(_screen){
        this.queryParams.orientation=_screen==this.queryParams.orientation?'':_screen;
        
        this.queryParams.pageNum=1;
        this.list=[];
        this.scrollLoaded=false;
        this.hasMore=true;
        this.queryList();
      },
      onInfoClose(){
        window.history.pushState({}, 0,this.curFullPath);
        document.body.style.overflow='inherit';
        this.showInfo=false;
      },
      handleShowInfo(_item){
        this.curFullPath=this.$route.fullPath;
        window.history.pushState({}, 0, '/game/'+_item.id);
        this.currentId=_item.id;
        document.body.style.overflow='hidden';
        this.showInfo=true;
      },
      handleCancelAllCate() {
        this.allCates.map((item) => {
          item.result.map((cate) => {
            cate.checked = false
          })
        })
        this.$forceUpdate()
      },
      handleConfirmSelectCate() {
        let datas = this.allCates.filter((r) => {
          return r.key == 'theme'
        })[0].result;
  
        let tags=[];
        datas.map(item=>{
          if(item.checked){
            tags.push(item.title);
          }
        })
        datas = this.allCates.filter((r) => {
          return r.key == 'style'
        })[0].result;
  
        let style='';
        datas.map(item=>{
          if(item.checked){
            style=item.title;
          }
        })
  
        let categoryIds=[];
        datas = this.allCates.filter((r) => {
          return r.key == 'categoryThirdId'
        })[0].result;
        datas.map(item=>{
          if(item.checked){
            categoryIds.push(item.id);
          }
        })
  
        datas = this.allCates.filter((r) => {
          return r.key == 'era'
        })[0].result;
  
        let era='';
        datas.map(item=>{
          if(item.checked){
            era=item.title;
          }
        })
  
        this.queryParams.tags=tags;
        this.queryParams.style=style;
        this.queryParams.categoryIds=categoryIds;
        this.queryParams.era=era;
        this.queryParams.pageNum=1;
        this.list=[];
        this.scrollLoaded=false;
        this.hasMore=true;
        this.queryList();
      },
      chooseCate(_cate) {
        if(this.curAllCateKey=='style'||this.curAllCateKey=='era'){
          if(_cate.checked){
            _cate.checked=!_cate.checked;
          }
          else{
            this.curCates.map(item=>{
              item.checked=false;
            })
            _cate.checked=true;
          }
          this.$forceUpdate()
          return;
        }
        if (_cate.checked) {
          _cate.checked = !_cate.checked;
        } else {
          _cate.checked = !_cate.checked
        }
  
        this.$forceUpdate()
      },
      chooseCateByKey(_key) {
        this.curAllCateKey = _key
        this.curCates = this.allCates.filter((r) => {
          return r.key == _key
        })[0].result
      },
      handleLoadingMore() {
        this.queryParams.pageNum++
        this.queryList()
      },
      async queryList() {
        var that = this
  
        let result = await api.articlelist(that.queryParams)
  
        let old = that.list
  
        that.list = [...old, ...result.data]
  
        that.total = result.total
  
        let totalPage = result.total % that.queryParams.pageSize == 0 ? result.total / that.queryParams.pageSize : parseInt(result.total / that.queryParams.pageSize) + 1
        if (result.data && (result.data.length < that.queryParams.pageSize || that.queryParams.pageNum >= totalPage)) {
          that.hasMore = false
        } else {
          that.hasMore = true
        }
        that.scrollLoaded = true
      }
    }
  }
  </script>